<template>
  <div class="layout">
    <load :state="loading"/>
    <div class="space"></div>
    <!--<dialog-pay :money="money" @finishInput="finishPasswordAndCommit" ref="dialogPay"></dialog-pay>-->
    <div class="money-container">
      <div class="money-tip">
        <span class="takeOut">取出余额（元）</span>
        <span class="all">全部金额：{{balance}}元</span>
      </div>
      <div class="space"></div>
      <div class="money-input">
        <div class="flex-r" style="justify-content: flex-start;height: 20vw;">
          <div class="yuan">¥</div>
          <input class="input" v-model="money" placeholder="1-200.00" type="number" pattern="[0-9]*"
                 onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' />
        </div>
      </div>
    </div>
    <div class="space"></div>
    <span class="tips">每日提现最多十次，每次最多不超过200元。</span>
    <div class="space" style="margin-top: 3vw;"></div>
    <!--仅支持微信支付-->
    <div class="pay-ways" style="margin-bottom: 14vw;">
    <item-payment-type :icon="getIcon('WeChat')"
                         payment="提现到微信账户" tip="" type="wx" :checked="true"
                         @isChecked="singleCheck"/>
    </div>
    <!--循环遍历支付方式已隐藏-->
    <div class="pay-ways" style="margin-bottom: 14vw;display: none">
      <item-payment-type v-for="(item,index) in resp.paymentList" :key="index" :icon="item.icon"
                         :payment="item.payment" :tip="item.tip" :type="item.type" :checked="item.checked"
                         @isChecked="singleCheck"/>
    </div>
    <div class="footer">
      <btn-primary btn-text="确认" btn-width="50px" @click.native="handleClick"></btn-primary>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';
  import BtnPrimary from '../../components/common/BtnPrimary';
  // import DialogPay from '../../components/user/DialogPay';
  import ItemPaymentType from '../../components/user/ItemPaymentType';
  import Load from '../../components/common/load/load';
  import Types from '@/store/OperationType';
  import { Toast } from 'vant';

  export default {
    /** kebab-case */
    name: 'user-withdraw',

    data() {
      return {
        loading: false,
        balance: '',
        money: '',
        resp: {
          paymentList: []
        }
      };
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {},

    components: {Load, ItemPaymentType, BtnPrimary},

    methods: {
      getIcon(icon) {
        return Public.iconImg + icon + '.svg';
      },
      handleClick() {
        // todo 输入验证
        // this.$refs.dialogPay.show();
        // this.$router.push({
        //   name: 'withdrawStep'
        // });
        this.$store.commit(Types.SET_CAN_DO_WITHDRAW, true);

        if (!(/^[1-9]\d*$/.test(this.money))) {
          Toast('提现金额只能为整数');
          return;
        }
        if (parseInt(this.money) > parseInt(this.balance)) {
          Toast('余额不足');
          return;
        }

        this.loading = true;
        console.log('userWithdraw');
        this.$UserReq.userWithdraw({money: this.money})
          .then((res) => {
            this.loading = false;
            console.log('userWithdraw-pres', res);
            this.$store.commit(Types.SET_CAN_DO_WITHDRAW, true);
            this.$router.push({
              name: 'withdrawStep',
              query: {
                tips: JSON.stringify(res.data.tips),
                info: JSON.stringify(res.data.info),
                url: res.data.url
              }
              // params: {canDoWithdraw: true}
            });
          }, () => {
            this.loading = false;
          });
      },
      finishPasswordAndCommit() {
        // todo 输入完密码 的回调
      },
      singleCheck(type) {
        this.resp.paymentList.forEach((item) => {
          if (item.checked === true) {
            item.checked = false;
          }
        });
        this.resp.paymentList.forEach((item) => {
          if (item.type === type) {
            item.checked = true;
          }
        });
      }
    },
    computed: {},
    watch: {
      // 监听具体数据变化，并做相应的处理
    },

    /** lifecycle  start */
    created() {
      this.$UserReq.getUserBalance()
        .then((res) => {
          console.log('12-getUserBalance', res);
          this.balance = res.data.balance;
        });
      for (let i = 0; i < 5; i++) {
        this.resp.paymentList.push(
          {
            icon: 'http://sxian.oss-cn-beijing.aliyuncs.com/icon/WeChat.svg',
            payment: 'XXXX' + i,
            tip: 'yyyyyyy' + i,
            checked: false,
            type: i + ''
          }
        );
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .layout
    flex-y()
    justify-content flex-start

  .money-tip
    height vw(45)
    width vw(345)
    margin-left vw(15)
    border-radius vw(5)
    background-color: white
    /*padding-left 10px*/
    flex-x()

  .takeOut
    position absolute
    word-vw(16, first-ash)
    height vw(22)
    line-height vw(22)
    left vw(25)
  .all
    position absolute
    word-vw(16, third-ash)
    height vw(22)
    line-height vw(22)
    left vw(147)

  .money-input
    word-big()
    height vw(108)
    width vw(345)
    margin-left vw(15)
    border-radius vw(5)
    background-color: white
    /*padding-left 10px*/
    flex-x()

  .yuan
    word-vw(30, first-ash)
    box-sizing border-box
    margin 0 10px
    border-radius vw(5)

  .input
    word-vw(28, first-ash)
    width vw(280)
    border-radius vw(5)
    /*flex 1*/

  .footer
    height 14vw
    width 100vw
    flex-center()
    position fixed
    bottom 0
    background-color transparent

  .tips
    word-vw(12, first-ash)
    position absolute
    left vw(15)
    top vw(180)
    height vw(17)
    line-height vw(17)

</style>
